<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
        <el-col :span="24">
          <el-form-item label="业务类型" prop="businessName">
            <el-input
              v-model.number="formData.businessName"
              placeholder="暂无"
              clearable
              :disabled="disabled"
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="使用类型" prop="useType">
            <el-radio-group
              v-model="formData.useType"
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-radio
                v-for="item in dict.type.coupon_useType"
                :disabled="disabled"
                :key="item.value"
                :label="parseInt(item.value)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="formData.useType == 2">
          <el-form-item label="指定类型名称" prop="useTypeName">
            <el-input
              v-model.trim="formData.useTypeName"
              :disabled="disabled"
              placeholder="暂无"
              show-word-limit
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="适用项目类型" prop="useArea">
            <el-radio-group
              v-model="formData.useArea"
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-radio
                v-for="item in dict.type.coupon_useArea"
                :disabled="disabled"
                :label="parseInt(item.value)"
                :key="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="formData.useArea == 2">
          <el-form-item label="指定项目名称" prop="serviceItemsNo">
            <el-select
              v-model="formData.serviceItemsNo"
              :disabled="disabled"
              multiple
              placeholder="暂无"
              :style="{ width: 'calc(50% - 67px)' }"
              clearable
            >
              <el-option
                v-for="item in serviceItemsOptions"
                :key="item.value"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优惠券类别" prop="category">
            <el-select
              v-model.number="formData.category"
              placeholder="暂无"
              :disabled="disabled"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-option
                v-for="item in dict.type.coupon_type"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input
              v-model.number="formData.couponName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券状态" prop="couponStatus">
            <el-select
              v-model="formData.couponStatus"
              placeholder="暂无"
              clearable
              :disabled="disabled"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.coupon_couponStatus"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="优惠券类型" prop="businessName">
            <el-input
              v-model.number="formData.businessName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="优惠券开始时间" prop="sendTimeStart">
            <el-date-picker
              v-model.trim="formData.sendTimeStart"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              value-format="yyyy-MM-dd HH:mm:ss"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券结束时间" prop="sendTimeEnd">
            <el-date-picker
              v-model.trim="formData.sendTimeEnd"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              :style="{ width: '100%' }"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="优惠券信息" prop="preferentialInfo">
            <el-input
              v-model.trim="formData.preferentialInfo"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="useTime" label="使用有效期">
            <el-input
              v-model.trim="formData.useTime"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否允许转赠" prop="isTurn">
            <el-radio-group v-model="formData.isTurn">
              <el-radio
                v-for="item in dict.type.coupon_is_turn"
                :disabled="disabled"
                :key="item.value"
                :label="parseInt(item.value)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="适用单位类型" prop="applicableUnitType">
            <el-radio-group
              v-model="formData.applicableUnitType"
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-radio
                v-for="item in dict.type.coupon_applicableUnitType"
                :key="item.value"
                :disabled="disabled"
                :label="parseInt(item.value)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="formData.applicableUnitType == 2">
          <el-form-item label="适用单位名称" prop="applicableUnitNo">
            <el-select
              v-model="formData.applicableUnitNo"
              multiple
              placeholder="暂无"
              clearable
              :disabled="disabled"
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-option
                v-for="item in applicableUnitOptions"
                :key="item.applicableUnitNo"
                :label="item.applicableUnit"
                :value="item.applicableUnitNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="总库存" prop="sendTotal">
            <el-input
              v-model.number="formData.sendTotal"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="已发放" prop="issued">
            <el-input
              v-model.number="formData.issued"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: 'calc(50% - 67px)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发送节点" prop="distributedNodeId">
            <el-radio-group
              v-model="formData.distributedNodeId"
              :style="{ width: 'calc(50% - 67px)' }"
            >
              <el-radio
                v-for="item in distributedNodeOptions"
                :key="item.id"
                :label="item.id"
                :disabled="disabled"
                >{{ item.value }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属租户" prop="tenantName">
            <el-input
              v-model.trim="formData.tenantName"
              :disabled="disabled"
              placeholder="暂无"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-input
              v-model.trim="formData.createTime"
              :disabled="disabled"
              placeholder="暂无"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="创建人" prop="userName">
            <el-input
              v-model.trim="formData.userName"
              :disabled="disabled"
              placeholder="暂无"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="使用说明" prop="remark">
            <el-input
              v-model.trim="formData.remark"
              type="textarea"
              placeholder="暂无"
              :disabled="disabled"
              clearable
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large" :style="{ textAlign: 'center' }">
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import {
  distributedNodeList,
  serviceItemsList,
  applicableUnitList,
} from '@/api/coupon/manage.js'
import { getBusinessById } from '@/api/coupon/business.js'
import MmvSelectButton from '../../components/mmv-select-button.vue'
export default {
  dicts: [
    'coupon_type',
    'coupon_is_turn',
    'coupon_couponStatus',
    'coupon_useArea',
    'coupon_useType',
    'coupon_applicableUnitType',
    'coupon_use_time_type',
  ],
  components: {
    MmvSelectButton,
  },

  data() {
    return {
      disabled: true,
      //业务类型
      serviceItemsOptions: [],
      applicableUnitOptions: [],
      distributedNodeOptions: [],
      formData: {
        couponId: '',
        couponName: '',
        category: '',
        preferentialInfo: '',
        useTimeType: 1,
        useType: null,
        useTypeName: '',
        useTime: null,
        couponStatus: null,
        isTurn: null,
        sendTimeStart: null,
        sendTimeEnd: null,
        tenantName: '',
        createTime: '',
        userName: '',
        businessId: '',
        businessName: '',
        businessNo: '',
        useArea: 1,
        serviceItemsNo: [],
        serviceItems: [],
        sendTotal: '',
        issued: null,
        applicableUnitType: null,
        applicableUnitNo: [],
        applicableUnit: [],
        distributedNodeId: '',
        distributedNode: '',
        remark: '',
        activityUnit: [],
      },
    }
  },
  created() {
    Promise.all([
      this.distributedNodeList(),
      this.getApplicableUnitList(),
      this.getServiceItemsList(),
    ]).then(([ResultJson1]) => {
      this.getBusinessById()
    })
  },
  methods: {
    // 获取指定项目名称
    getServiceItemsList() {
      serviceItemsList().then((res) => {
        this.serviceItemsOptions = res.data
      })
    },
    //获取适用单位名称
    getApplicableUnitList() {
      applicableUnitList().then((res) => {
        this.applicableUnitOptions = res.data
      })
    },
    // 发送节点接口
    distributedNodeList() {
      distributedNodeList().then((res) => {
        this.distributedNodeOptions = res.data
      })
    },
    getBusinessById() {
      getBusinessById({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data
        this.formData.serviceItemsNo = res.data.serviceItemsNo.split(',')
        this.formData.serviceItems = res.data.serviceItems.split(',')
        this.formData.applicableUnitNo = res.data.applicableUnitNo.split(',')
        this.formData.applicableUnit = res.data.applicableUnit.split(',')
        this.formData.activityUnit = this.formData.applicableUnitNo.map(
          (item) => {
            return this.applicableUnitOptions.filter((e) => {
              return e.applicableUnitNo === item
            })[0]
          }
        )
      })
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>
